import React from "react";
import { Button, Col, Form, Input, Row } from "antd";

const iconText = [
    "😀",
    "😃",
    "😄",
    "😁",
    "😆",
    "😅",
    "😂",
    "🤣",
    "😊",
    "😇",
    "🙂",
    "🙃",
    "😉",
    "😭",
];

function OrderAdd() {
    const onFinish = (values) => {
        console.log("Success:", values);
    };
    return (
        <div style={{ display: "flex", flexDirection: "column", height: 500 }}>
            <div style={{ flex: 1, overflowY: "auto" }}>
                <div style={{ display: "flex", gap: 10 }}>
                    <img
                        style={{ width: 50, height: 50, borderRadius: "50%" }}
                        src="https://img0.baidu.com/it/u=671112370,873229032&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717779600&t=d7364512d107afe535ff0534bd8787c7"
                        alt=""
                    />
                    <p
                        style={{
                            background: "#aaa",
                            width: "70%",
                            padding: 10,
                            borderRadius: 10,
                        }}
                    >
                        ajf
                        sjkahdfj今安徽宫颈癌韩国按时鉴定会给i士大夫挂会更好安吉尔返回阿达合格世界大会上功夫时代的给
                    </p>
                </div>

                <div
                    style={{
                        display: "flex",
                        gap: 10,
                        flexDirection: "row-reverse",
                    }}
                >
                    <img
                        style={{ width: 50, height: 50, borderRadius: "50%" }}
                        src="https://img0.baidu.com/it/u=671112370,873229032&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717779600&t=d7364512d107afe535ff0534bd8787c7"
                        alt=""
                    />
                    <p
                        style={{
                            background: "#3fbdfcff",
                            width: "70%",
                            padding: 10,
                            borderRadius: 10,
                        }}
                    >
                        ajf
                        sjkahdfj今安徽宫颈癌韩国按时鉴定会给i士大夫挂会更好安吉尔返回阿达合格世界大会上功夫时代的给
                    </p>
                </div>
            </div>
            <div style={{ height: 80, background: "#fff" }}>
                <Form
                    onFinish={onFinish}
                    layout="inline"
                    style={{ display: "flex", justifyContent: "space-between" }}
                >
                    <Form.Item name="text" style={{ flex: "1" }}>
                        <Input placeholder="请输入内容" />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit">发送</Button>
                    </Form.Item>
                </Form>
                <div>
                    {iconText.map((v) => {
                        return (
                            <span key={v} style={{ padding: 5 }}>
                                {v}
                            </span>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

export default OrderAdd;
